Starter Content is something introduced in WordPress 4.7. This is a feature that enables you to create the demo content for your theme from the beginning. In this tutorial you will get some insights in it and learn how to set it for your own WordPress theme.

Starter Content?

Before getting to know how to work with the start content, let’s first get to know what it is. The have a complete detailed description on it, how it works and all, I would advise you to read the WordPress Core introductory article.

The starter content will be used only on fresh installs. That means that if you have a site with some pages or posts, your site will not be affected by the starter content and thus it will not install new pages, posts or similar.

There is a ticket already for enabling the starter content on sites that are not fresh installs with a filter.

This content will also be imported and displayed when accessing Customizer. This way, your theme user can see how their theme could be like. If the user does not save and publish the changes, the live site will not be affected with the starter content. Pretty amazing, right?

Supporting Starter Content

For your theme to use the starter content, you need to tell the WordPress that your theme supports it like this:

<?php
add_theme_support( 'starter-content');

You should add that in your theme setup function that is hooked in the action after_setup_theme.

You’re done!

I know. You don’t really believe it. But if you don’t set your own starter content, which we will look into later, WordPress will provide a default starter content.

You can check the starter content in a gist since it is a bit longer, but we will go through it now, so you will see some chunks on off it.

If you want to add your own content, then we would set a second parameter in the add_theme_support. This second parameter would be an associative array where keys represent a section of the content and the value would contain another list of associative arrays that would represent each individual content:

<?php
add_theme_support( 'starter-content', array(
// Content Section for Widgets
'widgets' => array(
// Sidebar
'sidebar-1' => array(
// Widget ID
'my_text' => array(
// Widget $id -> set when creating a Widget Class
'text' ,
// Widget $instance -> settings
array(
'title' => 'My Title',
'text' => 'My Text'
)
)
)
),
// Content Section for Posts/Pages/CPT
'posts' => array(
// Post Symbol -> for internal use
'home' => array(
'post_type' => 'page',
'post_title' => _x( 'Home', 'Theme starter content' ),
'post_content' => _x( 'Welcome to your site! This is your homepage, which is what most visitors will see when they come to your site for the first time.', 'Theme starter content' ),
),
)
));
view raw array.php hosted with ❤ by GitHub

Content sections that we can set are:

  • widgets
  • attachments
  • posts, pages or custom post types
  • nav_menus
  • options
  • theme mods

Starter Widgets

To set widgets in starter content, we need to set which widget area to use (exp. sidebar-1) and then add an array of all the widget definitions. Here is an example of the Twenty Seventeen Theme:

<?php
add_theme_support( 'starter-content', array(
'widgets' => array(
'sidebar-1' => array(
'text_business_info',
'search',
'text_about',
),
'sidebar-2' => array(
'text_business_info',
),
'sidebar-3' => array(
'text_about',
'search',
),
),
// ....
);

If the list of attached widgets to a widget area contains only values and not a key=>value pair, then it will use a predefined widget. Let’s add a new text widget that will have a title Hello World and text Hello Widget inside the first sidebar, at first place:

<?php
add_theme_support( 'starter-content', array(
'widgets' => array(
'sidebar-1' => array(
'text_world' => array(
'text',
array(
'title' => 'Hello World',
'text' => 'Hello Widget',
)
),
'text_business_info',
'search',
'text_about',
),
// ...
);

Starter Post Types

We can set ‘dummy’ post types to show up in the customizer. Remember, if you want to use a custom post type, you must have them registered before. When supporting starter post types, you need to set a symbol, which is unquie. The array with definitions can consist of:

  • post_type
  • post_name
  • post_title
  • post_content
  • template
  • thumbnail

The only parts that you will see in the Customizer configuration are post_type and post_title. The post_title, template and thumbnail will be displayed on the right side where you can see how it would look like. Here is a combination of Twenty Seventeen settings and also a custom new page Services.

<?php
add_theme_support( 'starter-content', array(
// ...
// Twenty Seventeen
'posts' => array(
'home',
'about' => array(
'thumbnail' => '{{image-sandwich}}',
),
'contact' => array(
'thumbnail' => '{{image-espresso}}',
),
'blog' => array(
'thumbnail' => '{{image-coffee}}',
),
'homepage-section' => array(
'thumbnail' => '{{image-espresso}}',
),
// Custom added page Services
'services' => array(
'post_type' => 'page',
'post_title' => 'Services',
'post_content' => 'About services'
),
),
// ...
);
view raw posts.php hosted with ❤ by GitHub

Other pages here are also defined in the default starter content and thus they don’t need to be defined once again.

If we refresh our Customizer (without saving), we will see this when building our menu:

Starter Service Page in Customizer

If we add that page to our menu, we would be able to navigate to it through Customizer:

Service Page as Starter Content

In the code above you have also probably seen something in the brackets {{image-sandwich}}. This is a placeholder and it is different per each starter content. When used for posts in the parameter thumbnail, then it will look for a definition in section attachments to get an image where the key would have the same name.

Starter Attachments

Attachments can be used to add as media with other content and it can be used for attaching them as thumbnails. Here is an example of Twenty Seventeen:

<?php
add_theme_support( 'starter-content', array(
// ...
'attachments' => array(
'image-espresso' => array(
'post_title' => _x( 'Espresso', 'Theme starter content', 'twentyseventeen' ),
'file' => 'assets/images/espresso.jpg',
),
'image-sandwich' => array(
'post_title' => _x( 'Sandwich', 'Theme starter content', 'twentyseventeen' ),
'file' => 'assets/images/sandwich.jpg',
),
'image-coffee' => array(
'post_title' => _x( 'Coffee', 'Theme starter content', 'twentyseventeen' ),
'file' => 'assets/images/coffee.jpg',
),
),
// ...
);

As you can see, there is an attachment with the key image-sandwich. When setting attachments we need to specify a path to it inside the parameter file. This path can be relative and absolute. If you are going to set something like this inside a plugin, then you can specify an absolute path to that file with the help of the function plugin_dir_path. If you are having that file from a theme, then you can just set a relative path to the file and the folder inside your theme.

The attachments must reside in your WordPress folder, be it a plugin or theme. A file that is on a different domain or location can’t be used.

Starter Navigation Menus

The starter navigation menus can be used to create a navigation that would work with the theme. You can set everything you want and you can even use the starter post types that you have defined in the starter content.

<?php
add_theme_support( 'starter-content', array(
// Twenty Seventeen
'nav_menus' => array(
'top' => array(
'name' => __( 'Top Menu', 'twentyseventeen' ),
'items' => array(
'page_home',
'page_about',
'page_blog',
'page_contact',
// Our Custom Services page
'page_service' => array(
'type' => 'post_type',
'object' => 'page',
'object_id' => '{{services}}',
),
),
),
'social' => array(
'name' => __( 'Social Links Menu', 'twentyseventeen' ),
'items' => array(
'link_yelp',
'link_facebook',
'link_twitter',
'link_instagram',
'link_email',
),
),
),
) );
view raw nav.php hosted with ❤ by GitHub

You can see how a Twenty Seventeen has its navigation menus set and you can also see our custom page Services. By using the placeholder {{services}} we have told WordPress to check on the starter content, inside the section posts for a key services.

By using the starter navigation menus, our users won’t need to build their menus. We can do that for them, at least at the start.

Starter Options

The Starter options can help you set their site from the start. This can even be as simple as creating a new title for their site. As I have understood the whole process here, we are using the options that are registered for Customizer. I did not try doing anything outside of it. Since they have stated that the starter content is set only when Customizer has been opened, then this makes sense (to me).

You can also use placeholders in here. The placeholders here will represent a post type or an attachment. Here is a simple view of them:

<?php
add_theme_support( 'starter-content', array(
// ...
'options' => array(
'show_on_front' => 'page',
'page_on_front' => '{{home}}',
'page_for_posts' => '{{blog}}',
// Our Custom
'blogdescription' => 'My Awesome Blog'
),
// ...
);

The first three options are for setting what we will show as the homepage of our site and also which page will be used for posts. The fourth option is our custom option where we have set a new blog description. This setting blogdescription is used in the Settings > General part, but it has been also enabled inside Customizer.

Option Value as Starter Content

Starter Theme Mods

We are down to the last one. This are the settings that are define for using the theme_mod functions. They are specifically targeted at a theme. This is definitely usable only inside a theme where the Customizer options have been set and registered.

You can also use a placeholder that will operate in the same way as it does for starter options.

<?php
add_theme_support( 'starter-content', array(
// ...
'theme_mods' => array(
'panel_1' => '{{homepage-section}}',
'panel_2' => '{{about}}',
'panel_3' => '{{blog}}',
'panel_4' => '{{contact}}',
// Custom setting
'page_layout' => 'one-column'
),
// ...
);
view raw theme.php hosted with ❤ by GitHub

The first four settings are set inside the Twenty Seventeen. Those panels are used on the front page. The page layout of Twenty Seventeen has two options One Column and Two Column. By default it is set as Two Column. That is why I have added my own starter setting for the page layout to be a One Column.

Creating Starter Content within Plugins

To set the starter content within Plugins, we need to use the filter get_theme_starter_content. I will no go into this much further. Here is an example provided from WordPress Core article on how to set a new widget with a plugin:

<?php
// Plugin widget added using filters
function myprefix_starter_content_add_widget( $content, $config ) {
if ( isset( $content['widgets']['sidebar-1'] ) ) {
$content['widgets']['sidebar-1']['a_custom_widget'] = array(
'my_custom_widget', array(
'title' => 'A Special Plugin Widget',
),
);
}
return $content;
}
add_filter( 'get_theme_starter_content', 'myprefix_starter_content_add_widget', 10, 2 );

Conclusion

The starter content is a great new feature for theme developer but also for plugin developers because in both cases you can help your users by a lot. Many of them struggle at first when setting a WordPress site from scratch. This could help them get an idea on how to do something within WordPress.

Even though we have already a way to recommend other plugins within our plugin or theme, I think that Starter Plugins feature could also come in a near future.

Have you tried the Starter Content already?

Become a Sponsor

Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

6 Comments

  1. Hi,

    Is this only works for Page?
    Can we use on other post type?

    Thanks

    Reply

    1. Hi Josiah, it should work for any custom post type. As you can see in the code examples there is an array key post_type. In that key you can add any post type you want.

      Reply

  2. Mine one of widget have used `wp_dropdown_pages` how can I select its showing empty 🙂

    Reply

    1. I am facing same problem right now…. Its really fraustating. 🙁

      Reply

      1. Hi Uzes, I have replied to Shiva. Can you check the answer and see if that will work for you?

        Reply

    2. Hi Shiva, sorry for such a late response. You should set the key of the instance you’re using to save the ID of wp_dropdown_pages. In the above example, you can see I have used the key ‘title’ to set the $instance[‘title’] in my widget.

      For example, if you save that inside $instance[‘page’], then you should set that ‘page’ as a key and add the ID you want there.

      Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.